<template>
    <common-modal 
        ref="modalRef" 
        v-bind="attrs" 
        @sure="search" 
        @cancel="handleCancel" 
        @before-close="reset"
        @open="handleOpen"
    >
        <el-form label-width="110px" :rules="rules" ref="formRef" :inline="false" :model="formData">
            <el-form-item label="代理名称：" prop="agencyName">
                <el-input v-model="formData.agencyName" placeholder="请输入代理名称" clearable/>
            </el-form-item>
            <el-form-item label="比例：" prop="rate">
                <el-input-number style="width: 345px" :precision="2" :controls="false" v-model="formData.rate" placeholder="请输入比例" clearable/>
                <span style="margin-left: 10px">%</span>
            </el-form-item>
            <el-form-item label="时间区间：" prop="times">
                <el-date-picker
                    v-model="formData.times"
                    type="daterange"
                    range-separator="-"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                />
            </el-form-item>
            <el-form-item label="状态：" prop="state">
                <el-radio-group v-model="formData.state">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">正常</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </common-modal>
</template>
<script>
export default {
    inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref } from "vue";
import commonModal from "@/components/commonModal.vue";
import useForm from "@/hooks/useForm";
import { AddAgency, EditAgency } from '@/apis/agent';
import { ElMessage } from "element-plus";
const props = defineProps({
  type: {
    type: String,
    default: "add",
  },
  curForm: {
    type: [Object, String],
    default: () => ({}),
  },
});
const attrs = useAttrs()
const formData = reactive({
    agencyName: '',
    rate: void(0),
    times: [],
    state: 1
})
const modalRef = ref(null)
// 确定
const emits = defineEmits(["success"]);
const handleSure = async () => {
  const optionApi = props.type === 'add' ? AddAgency : EditAgency
  await optionApi(formateParams());
  ElMessage.success({
    message: "操作成功",
    type: "success",
  });
  emits("success");
  handleCancel();
};
// 格式化提交参数
const formateParams = () => {
    return {
        ...formData,
        beginTime: formData.times[0],
        endTime: formData.times[1],
        rate: (formData.rate / 100).toFixed(2)
    }
}
const { formRef, search, reset } = useForm(handleSure);
const rules = {
    agencyName: [
        { required: true, message: '请输入代理名称' }
    ],
    rate: [
        { required: true, message: '请输入比例' }
    ],
    state: [
        { required: true, message: '请选择状态' }
    ],
    times: [
        { required: true, type: 'array', min: 2, message: '请选择时间区间' }
    ]
}

// 取消 关闭弹窗
const handleCancel = () => {
    modalRef.value?.close()
}
// 打开弹窗
const handleOpen = () => {
  const { type, curForm } = props;
  console.log('curForm: ', curForm);
  if (type === "edit") {
    Object.assign(formData, curForm);
  } else {
    Object.assign(formData, {
        agencyName: '',
        rate: void(0),
        times: [],
        state: 1
    });
  }
};
</script>
